<template>
    <div class="pages">
        <van-nav-bar class="navBar" title="首页"  > <!--  -->
            <!-- <template #right> -->
                <!-- <span class="span" @click="logout" style="margin-left:10px;">切换账号<van-icon :name="require('../../assets/images/changeAccout.png')" /></span>
            </template> -->
        </van-nav-bar>
        <el-container v-loading="loading">
            <el-header class="elHead">
                <van-row type="flex" justify="center" align="center">
                    <van-col span="4">
                        <van-image
                            round
                            width="1rem"
                            height="1rem"
                            :src="vipUser.headUrl?vipUser.headUrl:'https://img.yzcdn.cn/vant/cat.jpeg'"
                            />
                    </van-col>
                    <van-col span="16">                        
                        <van-col span="24">{{user.phone}}</van-col>
                        <van-col span="24">微信号：{{vipUser.wxName}}</van-col>
                        <van-col span="24">已绑车辆：{{bindCar}}</van-col>
                    </van-col>
                </van-row>
                <el-form ref="form" :model="form" label-width="0" size="mini" class="elForm">
                    <el-form-item>
                        <div class="info">
                            <p class="p1">我的VIP特权</p>
                            <p class="p2"><van-icon class="memberIcon" :name="require('@/assets/images/icon-member.png')" />智泊云停车会员</p>
                            <p class="p3"><el-progress :percentage="50" color="#fff" :text-inside="true"></el-progress></p>
                            <p class="p1">会员余额：{{vipUser.money}}元 <span class="fr">加入日期：{{vipUser.createTime}}</span></p>
                        </div>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main class="elMain elMainHead">
                <van-grid  :column-num="3" class="gridGroup">
                    <van-grid-item  text="月卡" @click='jumpTo(5)' >
                        <template slot="icon">
                            <div>{{monthlyCarList.length}}</div>
                        </template>
                    </van-grid-item>
                    <van-grid-item  text="积分"  >  <!-- @click='jumpTo(6)' -->
                        <template slot="icon">
                            <div>0</div>
                        </template>
                    </van-grid-item>
                    <van-grid-item  text="优惠券" > <!-- @click='jumpTo(7)' -->
                        <template slot="icon">
                            <div>0</div>
                        </template>
                    </van-grid-item>
                </van-grid>
            </el-main>
            <el-main class="elMain">
                <van-grid :gutter="0" :column-num="4" class="gridGroup" :border="false">
                    <van-grid-item  text="我的车辆" @click='jumpTo(1)'  :icon="require('../../assets/images/owner/myCar.png')"/>
                    <!-- <van-popover class="vanPop" v-model="showPopover" trigger="click" :actions="actions" get-container="elMain" @select="handleSelect">
                        <template #reference>
                            <van-grid-item  text="无感支付" @click='jumpTo(2)'  :icon="require('../../assets/images/owner/payment.png')"/>
                        </template>
                    </van-popover> -->
                    <van-grid-item  text="无感支付" @click='jumpTo(2)'  :icon="require('../../assets/images/owner/payment.png')"/>
                    <van-grid-item  text="附近车场" @click='jumpTo(3)'  :icon="require('../../assets/images/owner/carPark.png')"/>
                    <van-grid-item  text="停车账单" @click='jumpTo(4)'  :icon="require('../../assets/images/owner/bill.png')"/>
                    <van-grid-item  text="我的月租车" @click='jumpTo(5)'  :icon="require('../../assets/images/owner/monthlyCar.png')"/>
                    <van-grid-item  text="电子发票" @click='jumpTo(6)'  :icon="require('../../assets/images/owner/invoice.png')"/>
                    <van-grid-item  text="补缴停车费" @click='jumpTo(7)'  :icon="require('../../assets/images/owner/afterPayment.png')"/>
                    <van-grid-item  text="会员充值" @click='jumpTo(8)'  :icon="require('../../assets/images/owner/member.png')"/>
                    <van-grid-item  text="临停缴费"   @click='jumpTo(9)'  :icon="require('../../assets/images/owner/temporaryStop.png')"/>
                    <van-grid-item  text="代人缴费" @click='jumpTo(10)'  :icon="require('../../assets/images/owner/payTasaday.png')"/>
                    <van-grid-item  text="广告投放" @click='jumpTo(11)'  :icon="require('../../assets/images/owner/advert.png')"/>
                    <van-grid-item  text="联系我们" @click='jumpTo(12)'  :icon="require('../../assets/images/owner/contactUs.png')"/>
                </van-grid>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            params:{
                userId:""
            },
            bindCar:"",
            monthlyCarList:[],
            loading:false,
            form: { //form表单
                curProject:'',
                carPark:''
            },
            projectLst:[],
            carParkLst:[],
            vipMoney:0,
            showPopover: false,
            actions: [
                { text: '开通微信无感支付', className:"wxPay",icon:  require("@/assets/images/payType1.jpg")},
                { text: '开通建行无感支付', className:"jhPay",icon: require("@/assets/images/payType2.jpg") }
            ],
        }
    },
    computed: {
        ...mapGetters(['user','vipUser'])
    },
    created() {
        this.params.userId = this.user.id||sessionStorage.getItem('userId')
        this.init()
    },
    methods: {
        async init(){
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            await this.$api.owner.getMyCarList(this.params).then(res=>{
                if(res.code == 200){
                    if(res.result&&res.result.length>0){
                        let rows = res.result; //请求返回当页的列表
                        //debugger
                        rows.map((o)=>{
                            this.bindCar+=o.carNum+' '
                        })
                    }                    
                }else{
                    this.$toast(res.message);
                }
                this.loading = false;
            }).catch((res) => {
                this.loading = false;
            });
            await this.$api.owner.getMonthlyCarList(this.params).then(res=>{
                this.$toast.clear();
                if(res.code == 200){
                    //debugger
                    let rows = res.result; //请求返回当页的列表
                    this.monthlyCarList = rows||[]
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.$toast.clear();
                this.loading = false;
            });
        },
        jumpTo(type){
            /* if(this.form.carPark == ''){
                this.$toast('请选择车场');
                return
            }else{ */
                switch (type) {
                    case 1:
                        this.$router.push('/myCar')
                        break;
                    case 2:
                        window.location.href = "https://po.yunzongnet.com/api/v2/open/autopay?q=4E75AE9418D77759DAFE72324723AF1AB3C32BA914A71D9404458BF3658D3058F32982016026A07A2EBF4189D0B376CAB3DF7A7E49D9E3991DBF8FBAF6A58998A0219EF2D12C002E306D41A625504B67"
                        //this.$router.push('/payment')
                        break;
                    case 3:
                        //this.$router.push('/carPark')
                        break;
                    case 4:
                        this.$router.push('/bill')
                        break;
                    case 5:
                        this.$router.push({
                            path:"/monthlyCar",
                            query:{
                                userId:this.params.userId
                            }
                        })
                        break;
                    case 6:
                        //this.$router.push('/invoice')
                        break;                
                    case 7:
                        this.$router.push('/afterPayment')
                        break;                
                    case 8:
                        this.$router.push('/memberRecharge')
                        break;                
                    case 9:
                        this.$router.push('/temporaryStop')
                        break;                
                    case 10:
                        this.$router.push('/payTasaday')
                        break;                
                    case 11:
                        //this.$router.push('/advert')
                        break;                
                    case 12:
                        this.$router.push('/contactUs')
                        break;                
                    default:
                        break;
                }
            /* } */

        },
        handleSelect(action,index){
            //debugger
            let url = ""
            if(index==0){
                url = "https://po.yunzongnet.com/api/v2/open/autopay?q=4E75AE9418D77759DAFE72324723AF1AB3C32BA914A71D9404458BF3658D3058F32982016026A07A2EBF4189D0B376CAB3DF7A7E49D9E3991DBF8FBAF6A58998A0219EF2D12C002E306D41A625504B67"
                window.location.href = url
            }else{
                url = "#小程序://无感出行/建行无感出行/CgRW8lwbew6eUUd"
                window.location.href = url
                //window.location.replace(url); 
            }
        },
        logout(){
            /* window.location.replace(
                window.location.origin + "/loginOwner?openid="+this.user.openid
            ); */
        }
    },
    beforeRouteEnter  (to, from, next) {
        next(vm => {
            if (from.name === 'login') {
                vm.projectLst = []
                vm.getProject()
            }
        })
    },
}
</script>
<style lang="scss" scoped>
    #app .pages{
        height:auto;
        /deep/ .el-header{
            height:150px !important;
            padding: 0;            
            padding-top:0.5rem;
            border-bottom: 1px solid #eee;
        }
        .elHead .elForm{
            margin-top: 20px;
            .info{
                .p1{
                    font-size: .2rem;
                }                
                .memberIcon{
                    vertical-align: middle;
                }
                /deep/ .el-progress-bar__outer{
                    background-color: #ccc;
                }
                .fr{
                    float: right;
                }
            }
        }
        .elMain{            
            width: 93%;
            margin: 3px auto 20px;
            padding: 10px 0;
            background: #fff;
            border-radius: 5px;
            box-sizing: border-box;
            &.elMainHead{
                margin: 90px auto 10px;;
                padding: 0;
            }
            .tit{
                font-size: .35rem;
                padding: 10px 0;
                text-align: center;
            }
            /deep/ .gridGroup{
                .van-grid-item__icon {
                    font-size: 1rem;
                }
                .van-grid-item__text{
                    font-size: .2rem;
                    font-weight: 600;
                    text-align: center;
                }
                .van-grid-item__content{
                    padding: 10px 8px;
                }
                .vanPop{
                    flex-basis: 25%;
                }
                .van-popup{
                    .van-popover__action{
                        width: auto;
                    }
                    .wxPay{
                        color:#09bd62;
                    }
                    .jhPay{
                        color:#3498e6;
                    }
                }
            }
        }
        .van-grid{
            /* margin-top:.5rem;
            box-shadow: 0 2px 11px rgba(0,0,0,.6); */
        }
        .vanGrid{
            margin-top:.1rem;
            /deep/.van-grid-item__content--center{
                height:2.3rem;
            }
            
        }
        .van-grid-item__content--center{
            /* height:2.8rem;
            background-color: #1989fa;
            color:#fff;
            .van-grid-item__text{
                color:#fff;
                font-size: .3rem;
                font-weight: bold;
            } */
        }
        .navBar{
            .span{
                color:#fff;
            }
        }
        
        
    }
    
</style>